<style scoped>
    #page-act {
        height: 100%;
        /*overflow: hidden;*/
    }
    .act_20170116 {
        font-family: 'Microsoft JhengHei Light', 'Microsoft JhengHei', 'Microsoft YaHei Light', 'Microsoft YaHei', sans-serif;
        font-size: 0.12rem;
        width: 100%;
        background: url("https://img.alicdn.com/imgextra/i4/1876943437/TB2pseXc3xlpuFjSszgXXcJdpXa_!!1876943437.png") center center repeat-y #e64444;
        background-size: contain;
        color: #fff;
        min-height: 100vh;
    }
    .act_20170116 .count_warp {
        height: 0.335rem;
        line-height: 0.335rem;
        text-align: center;
        width: 100%;
        background: transparent;
        position: fixed;
        top: 0;
        z-index: 999;
    }

    .act_20170116 .countdown {
        height: 100%;
        background: #302a2b;
        margin: 0 auto;
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);

    }
    .act_20170116 .countdown.in {
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
    .act_20170116 .countdown i {
        color: #000000;
        width: 0.45rem;
        letter-spacing: 0.14rem;
        text-indent: 0.08rem;
        text-align: left;
        display: inline-block;
        background: url('') center center / cover;
    }

    .act_20170116 .banner {
        display: block;
        width: 100%;
        height: 2.13rem;
        background: url("https://img.alicdn.com/imgextra/i1/1876943437/TB27A_JeB8lpuFjy0FnXXcZyXXa_!!1876943437.jpg") center center / cover;
    }
    .act_20170116 .act {
        margin: 0 auto;
    }
    .act_20170116 .act_1 {
        width: 3.45rem;
        /*height: 2.85rem;*/
        background: #ff5757;
        border-radius: 0.03rem;
        font-size: 0.13rem;
        line-height: 0.13rem;
    }
    .act_20170116 .act_1 .act_1_warp {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .act_20170116 .act_1 .act_1_warp::before,.act_1 .act_1_warp::after {
        display: block;
        content: '';
        width: 0.055rem;
        height: 1.2rem;
        position: absolute;
        top: 0.11rem;
        background: url("https://img.alicdn.com/imgextra/i3/1876943437/TB2o08pdNtmpuFjSZFqXXbHFpXa_!!1876943437.png") top left / cover;
    }
    .act_20170116 .act_1 .act_1_warp::before {
        left: 0.075rem;
    }
    .act_20170116 .act_1 .act_1_warp::after {
        right: 0.075rem;
    }
    .act_20170116 .act_1 table {
        margin: 0 auto;
        width: 3rem;
        border: none;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        word-break: keep-all;
        white-space: nowrap;
    }
    .act_20170116 .act_1 table td {
        border-bottom: 1px solid #f04848;
    }
    .act_20170116 .act_1 table .tr_1 td {
        padding-top: 0.13rem;
        padding-bottom: 0.1rem;
        text-indent: 0.1rem;
    }
    .act_20170116 .act_1 table .tr_2 td {
        padding-top: 0.07rem;
        padding-bottom: 0.07rem;
    }
    .act_20170116 .act_1 table .tr_3 td {
        padding-top: 0.08rem;
        padding-bottom: 0.08rem;
    }
    .act_20170116 .act_1 table .tr_3 .td_2 {
        line-height: 0.18rem;
    }
    .act_20170116 .act_1 table .td_1 {
        width: 42%;
        border-right: 1px solid #f04848;
        text-indent: 0.1rem;
    }
    .act_20170116 .act_1 table .td_2 {
        padding-left: 0.2rem;
    }
    .act_20170116 .act_1 table .tr_4 td {
        font-size: 0.12rem;
        text-indent: 0.1rem;
        color: #feee3d;
        padding: 0.07rem 0 0.15rem 0;
    }



    .act_20170116 .act_2 {
        margin-top: 0.35rem;   /*  0.5 + 0.2 */
        width: 3.45rem;
    }
    .act_20170116 .act_2 .act_2_top,.act_2 .act_2_bottom {
        background: #ffdeac;
        margin: 0 auto;
        height: 0.165rem;
        width: 3.12rem;  /*   6.9 - 0.33 - 0.33  */
        position: relative;
    }
    .act_20170116 .act_2 .act_2_top::before,.act_2 .act_2_top::after,.act_2 .act_2_bottom::before,.act_2 .act_2_bottom::after {
        display: block;
        content: '';
        width: 0.165rem;
        height: 0.165rem;
        position: absolute;
        top: 0;
    }
    .act_20170116 .act_2 .act_2_top::before {
        left: -0.165rem;
        background: radial-gradient(0.33rem at left top,transparent 40%,#ffdeac 40%);
        background: -webkit-radial-gradient(0.33rem at left top,transparent 40%,#ffdeac 40%);
    }
    .act_20170116 .act_2 .act_2_top::after {
        right: -0.165rem;
        background: radial-gradient(0.33rem at right top,transparent 40%,#ffdeac 40%);
        background: -webkit-radial-gradient(0.33rem at right top,transparent 40%,#ffdeac 40%);
    }
    .act_20170116 .act_2 .act_2_bottom::before {
        left: -0.165rem;
        background: radial-gradient(0.33rem at left bottom,transparent 40%,#ffdeac 40%);
        background: -webkit-radial-gradient(0.33rem at left bottom,transparent 40%,#ffdeac 40%);
    }
    .act_20170116 .act_2 .act_2_bottom::after {
        right: -0.165rem;
        background: radial-gradient(0.33rem at right bottom,transparent 40%,#ffdeac 40%);
        background: -webkit-radial-gradient(0.33rem at right bottom,transparent 40%,#ffdeac 40%);
    }
    .act_20170116 .act_2 .act_2_middle {
        background: #ffdeac;
    }
    .act_20170116 .act_2 table {
        background: inherit;
        margin: 0 auto;
        width: 3.1rem;
        border: none;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        word-break: keep-all;
        white-space: nowrap;
        font-size: 0.12rem;
        line-height: 0.12rem;
        text-align: center;
        color: #4d2a00;
    }
    .act_20170116 .act_2 table th {
        text-align: center;
        padding: 0.11rem 0;
        border-bottom: 0.02rem solid #e3b979;
    }
    .act_20170116 .act_2 table tbody tr:last-of-type {
        font-weight: bold;
    }
    .act_20170116 .act_2 table td {
        border-bottom: 1px solid #e3b979;
        padding: 0.07rem 0;
    }
    .act_20170116 .act_2 th:nth-of-type(1) {
        width: 28%;
    }
    .act_20170116 .act_2 th:nth-of-type(2) {
        width: 40%;
    }
    .act_20170116 .act_2 th:nth-of-type(3) {
        width: 32%;
    }

    .act_20170116 .act_2 .act_2_warp {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .act_20170116 .act_2 .act_2_warp::before,.act_2 .act_2_warp::after {
        display: block;
        content: '';
        width: 3.485rem;
        height: 0.205rem;
        position: absolute;
        z-index: 99;
        left: -0.0175rem;
        /*background: url("https://img.alicdn.com/imgextra/i1/1876943437/TB2wa4EdUdnpuFjSZPhXXbChpXa_!!1876943437.png") center center / cover;*/
    }
    .act_20170116 .act_2 .act_2_warp::before {
        transform: rotateZ(180deg);
        -webkit-transform: rotateZ(180deg);
        top: -0.13rem;
    }
    .act_20170116 .act_2 .act_2_warp::after {
        bottom: -0.13rem;
    }
    .act_20170116 .act_btn {
        width: 2.04rem;
        height: 0.45rem;
        line-height: 0.45rem;
        display: block;
        margin: 0.17rem auto 0.02rem auto;
        font-size: 0.21rem;
        font-weight: bold;
        color: #fff;
        border-radius: 0.225rem;
        position: relative;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .act_20170116 .act_btn::after {
        content: '';
        width: 1.95rem;
        height: 0.35rem;
        display: block;
        font-size: 0.21rem;
        font-weight: bold;
        color: #fff;
        border-radius: 0.175rem;
        top: 0.05rem;
        left: 0.045rem;
        position: absolute;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .act_20170116 .act_btn_1 {
        background: #ff5552;
        text-shadow: 0.05rem 0.05rem 0.05rem #e8302e;
        /*border: 1px solid #e90d09;*/
    }
    .act_20170116 .act_btn_1::after {
        border: 1px solid #e90d09;
    }
    .act_20170116 .act_btn_2 {
        background: #ffb049;
        text-shadow: 0.05rem 0.05rem 0.05rem #ff932e;
        /*border: 1px solid #ffd49c;*/
    }
    .act_20170116 .act_btn_2::after {
        border: 1px solid #ffd49c;
    }
    .act_20170116 .act_btn_3 {
        background: #909090;
        text-shadow: 0.05rem 0.05rem 0.05rem #707070;
        /*border: 1px solid #717171;*/
    }
    .act_20170116 .act_btn_3::after {
        border: 1px solid #717171;
    }


    .act_20170116 .act_3 {
        background: #ffdeac;
        /*margin-top: 0.5rem;   !*  0.5 + 0.1 *!*/
        padding-bottom: 0.125rem;   /*  0.32 - 0.07 */
        width: 3.45rem;
        border-radius: 0.03rem;
        /*font-size: 0.24rem;*/
        line-height: 0.2rem;
        /*color: #4d2a00;*/
    }
    .act_20170116 .act_3 h3 {
        font-size: 0.15rem;
        font-family: inherit;
        font-weight: bold;
        text-align: center;
        width: 3.23rem;
        margin: 0.225rem auto 0.0525rem auto;
        line-height: 1;
        /*border-bottom: 1px solid #e3b979;*/
    }
    .act_20170116 .act_3 p {
        font-size: 0.12rem;
        line-height: 0.2rem;
        padding: 0.05rem 0.16rem;
    }
    .act_20170116 .act_3 p:nth-of-type(1) {
        /*margin: 0.12rem 0 0 0;*/
    }
    .act_20170116 .bold {
        font-weight: bold;
    }
    .act_20170116 .red {
        color: #ec3b36;
    }
    /*.act_20170116 footer {*/
    /*background: #e04343;*/
    /*width: 6.9rem;*/
    /*word-break: keep-all;*/
    /*white-space: nowrap;*/
    /*font-weight: bolder;*/
    /*margin: 0.2rem auto 0.42rem auto;*/
    /*text-shadow: 0.1rem 0.1rem 0.1rem #d92c28;*/
    /*text-align: center;*/
    /*}*/

    @media screen and (max-width:320px){
        .act_20170116 footer {
            letter-spacing: -0.01rem;
        }
        .act_20170116 .act_1 table .tr_4 td {
            letter-spacing: -0.01rem;
        }
    }


    .act_20170116 #act-c1.swiper-container {
        width: 100%;
        height: 100vh;
    }

    .act_20170116 #act-c1 .swiper-slide{
        height:auto;
    }




    .act_20170116 .rule_button {
        position: relative;
        color: #feee3d;
        padding: 0.1rem 0;
        line-height:1;
        background: #ff5757;
        text-align: center;
        margin: 0.05rem auto 0 auto;
        width: 3.45rem;
        letter-spacing: 0.01rem;
        font-size: 0.15rem;
        border-radius: 0.03rem;
    }
    .act_20170116 .rule_button::before {
        content: '';
        display: block;
        position: absolute;
        left: 0.075rem;
        top: -0.21rem;
        height: 0.35rem;
        width: 0.05rem;
        background: url("https://img.alicdn.com/imgextra/i1/1876943437/TB2nKbGfEhnpuFjSZFEXXX0PFXa_!!1876943437.png") center center / cover;
    }
    .act_20170116 .rule_button::after {
        content: '';
        display: block;
        position: absolute;
        right: 0.054rem;
        top: -0.21rem;
        height: 0.35rem;
        width: 0.05rem;
        background: url("https://img.alicdn.com/imgextra/i1/1876943437/TB2nKbGfEhnpuFjSZFEXXX0PFXa_!!1876943437.png") center center / cover;
    }

    .act_20170116 .act_3 {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
        -webkit-transform: translate3d(-50%,-50%,0);
        z-index: 9999;
        font-size: 0.13rem;
        color: #1b2429;
    }



    .act_20170116 footer {
        position: fixed;
        bottom: 0;
        height: .5rem;
        z-index: 9;
    }
    .act_20170116 footer .btn {
        position: fixed;
        bottom: 0;
        height: .5rem;
        font-size: 0.15rem;
        line-height: .5rem;
        display: block;
        text-align: center;
        z-index: 999;
    }
    .act_20170116 footer .btn_1 {
        background: #ef5657;
        color: #fff;
        width: 100%;
    }
    .act_20170116 footer .btn_2 {
        background: #302a2b;
        color: #fff;
        width: 60%;
        left: 0;
    }
    .act_20170116 footer .btn_3 {
        background: #ef3737;
        color: #fff;
        width: 40%;
        right: 0;
    }
</style>
<template>
    <div  id="page-act">
    <div class="act_20170116">
        <section class="count_warp">

            <div class="countdown in animated" transition="down"  v-if="data.isStart == 1">
                <span class="bold">距离活动结束还有</span>
                <span><i class="t-h" v-html="h"></i></span>:<span><i class="t-m" v-html="m"></i></span>:<span><i class="t-s" v-html="s"></i></span>
            </div>


            <div class="countdown in animated" transition="down" v-if="data.isStart == 2">

                <span class="bold">距离活动开始还有</span>

                <span><i class="t-h" v-html="h"></i></span>:<span><i class="t-m" v-html="m"></i></span>:<span><i class="t-s" v-html="s"></i></span>

            </div>
            <div class="countdown in animated" transition="down" transition="down" v-show="data.isStart == 3">

                <span class="bold">活动已结束</span>

            </div>

        </section>

        <div class="swiper-container" id="act-c1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <i class="banner"></i>
                    <section class="act act_1">
                        <div class="act_1_warp">
                            <table>
                                <tr class="tr_1">
                                    <td colspan="2">全体一次性在线消费达到100元的用户</td>
                                </tr>
                                <tr class="tr_2">
                                    <td class="td_1">在线支付10元</td>
                                    <td class="td_2"><b>立得1拼宝币</b></td>
                                </tr>
                                <tr class="tr_3">
                                    <td class="td_1">在线支付100元</td>
                                    <td class="td_2">
                                        <b>8%的概率得100拼宝币</b>
                                        <br>
                                        <b>92%的概率得10拼宝币</b>
                                    </td>
                                </tr>
                                <tr class="tr_4">
                                    <td colspan="2">满百次数越多,概率越大,第20次100%得100拼宝币</td>
                                </tr>
                            </table>
                        </div>
                    </section>
                    <div @click="isRule = true" class="rule_button">点击查看规则 >></div>

                    <section class="act act_2">
                        <div class="act_2_warp">
                            <div class="act_2_top"></div>
                            <div class="act_2_middle">
                                <table>
                                    <thead>
                                    <tr>
                                        <th>在线支付次数</th>
                                        <th>支付金额</th>
                                        <th>获得100拼宝币概率</th>
                                    </tr>
                                    </thead>
                                    <tbody class="act_tbody">
                                    <tr>    <td>第1次</td>    <td>100</td>    <td>8%</td></tr><tr>    <td>第2次</td>    <td>100</td>    <td>9%</td></tr><tr>    <td>第3次</td>    <td>100</td>    <td>10%</td></tr><tr>    <td>第4次</td>    <td>100</td>    <td>11%</td></tr><tr>    <td>第5次</td>    <td>100</td>    <td>12%</td></tr><tr>    <td>第6次</td>    <td>100</td>    <td>13%</td></tr><tr>    <td>第7次</td>    <td>100</td>    <td>14%</td></tr><tr>    <td>第8次</td>    <td>100</td>    <td>15%</td></tr><tr>    <td>第9次</td>    <td>100</td>    <td>16%</td></tr><tr>    <td>第10次</td>    <td>100</td>    <td>17%</td></tr><tr>    <td>第11次</td>    <td>100</td>    <td>18%</td></tr><tr>    <td>第12次</td>    <td>100</td>    <td>19%</td></tr><tr>    <td>第13次</td>    <td>100</td>    <td>20%</td></tr><tr>    <td>第14次</td>    <td>100</td>    <td>21%</td></tr><tr>    <td>第15次</td>    <td>100</td>    <td>22%</td></tr><tr>    <td>第16次</td>    <td>100</td>    <td>23%</td></tr><tr>    <td>第17次</td>    <td>100</td>    <td>24%</td></tr><tr>    <td>第18次</td>    <td>100</td>    <td>25%</td></tr><tr>    <td>第19次</td>    <td>100</td>    <td>26%</td></tr><tr>    <td>第20次</td>    <td>100</td>    <td>100%</td></tr>
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="3" style="border: none">

                                            <a v-if="data.isStart == 1" class="act_btn act_btn_1" href="javascript:void(0)" v-link="{path:'/home'}" data-href="./" data-cnzz="2017年末活动 | 1">马上拼宝</a>

                                            <a v-if="data.isStart == 2" class="act_btn act_btn_2" href="javascript:void(0)" data-cnzz="2017年末活动 | 2">敬请期待</a>

                                            <a v-if="data.isStart == 3" class="act_btn act_btn_3" href="javascript:void(0)" data-cnzz="2017年末活动 | 3">活动结束</a>

                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>

                            <div class="act_2_bottom"></div>
                        </div>
                    </section>

                    <div style="height: 1.6rem;width: 100%"></div>
                </div>
            </div>
            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>



        <div class="mask" v-show="isRule" @click="isRule = false"></div>
        <section class="act act_3" v-show="isRule">
            <h3>活动说明</h3>
            <p style="color:#44453d; white-space: nowrap; letter-spacing: -0.01rem">
                活动时间：{{data.startTime}} 至 {{data.endTime}}
            </p>
            <p>
                1、活动期间，在线充值或消费满100元（不含优惠券），就有机会获得100拼宝币，多次消费获得100拼宝币的概率持续上涨，第20次100%获得100拼宝币。
            </p>
            <p>
                2、消费金额计算不含优惠券。
            </p>
            <p>
                3、返拼宝币以单笔在线支付10元或100元的订单来计算，例：单次在线支付40元，计为一次满足10元条件，只赠送1拼宝币；单次在线支付200元，计为一次满足100元条件，抽一次奖，获得一个红包。
            </p>
            <p>
                4、每期活动倒计时结束后，所有参与100元抽奖资格归零，不累计到下一期活动。
            </p>
            <p>
                5、若发现用户在活动过程中使用不正当手段参与，活动主办方有权取消其参与活动的资格与商品。
            </p>
            <p class="red">
                声明：您通过众联拼宝参与的活动与苹果公司(Apple lnc.)无关。
            </p>
        </section>

        <footer>

            <div id="btn-next" v-if="data.isStart == 3">
                <a href="javascript:void(0)" class="btn btn_2">活动已结束</a>
                <a href="javascript:void(0)" data-href="./" v-link="{path:'/home'}" class="btn btn_3">到处逛逛</a>
            </div>

            <template v-else>

                <a v-if="!data.isJoin&&!changeStatus" class="btn btn_1" id="btn-1"  data-cnzz="情人节|领取资格" @click="getAct">领取资格</a>

                <div id="btn-next" v-if="!!data.isJoin&&changeStatus" >
                    <a href="javascript:void(0)" class="btn btn_2">资格已领取 <span v-if="!!joinTime">{{joinTime}}</span></a>
                    <a href="javascript:void(0)" data-href="./" v-link="{path:'/home'}" class="btn btn_3">到处逛逛</a>
                </div>

            </template>

        </footer>
    </div>
    </div>

    <pop :status-pop="statusPop" :status-toast="statusToast" :msg="msg">
        <a href="javascript:;" @click="statusPop = false">确定</a>
    </pop>
</template>
<script>
    import User from '../module/user'
    import Request from '../config/request'
//    import Config from '../config/config'
    import Swiper from '../libs/swiper.min'
    import pop from '../components/pop'
    module.exports = {
        data() {
            return {
                data:{},
                joinTime:'',
                apiDomain:'',
                sp:null,
                isRule:false,
                isDown:false,
                h:'&ndash;&ndash;',
                m:'&ndash;&ndash;',
                s:'&ndash;&ndash;',
                timer:0,
                broadcast:[],
                title:'',
                username:'',
                winMoney:'',
                isBroadcast:false,
                statusPop:false,
                statusToast:false,
                msg:'',
                changeStatus:false
            }
        },
        components: {
            pop
        },
        created(){

            this.$dispatch('isLoading', true);

        },
        async ready() {

            let res = await this.getActInfo();

            if (res.status == 200) {

                let t = 0;

                if (res.data.isStart == 2 || res.data.isStart == 1) {

                    t = res.data.timeLeft;

                } else {

                    t = -100;

                }


                if (!!res.data.isJoin) {

                    this.changeStatus = true;

                }

                if (!!res.data.joinTime) {

                    let timeStr = res.data.joinTime,
                        timeStr1 = timeStr.substring(5,10),
                        timeStr2 = timeStr.substring(11,16);

                    this.joinTime = timeStr1 + ' ' + timeStr2;

                }

                this.data = Object.assign({},this.data,res.data);

                this.apiDomain = Config.apiDomain;

                this.isDown = true;

                this.sp = new Swiper('#act-c1', {

                    direction: 'vertical',
                    slidesPerView: 'auto',
                    freeMode: true,
                    freeModeMomentum : true,
                    mousewheelControl: true,
                    grabCursor: true,
                    resistanceRatio : 0

                });

                function doubleNum(e) {

                    if(e<10) return ('0'+e);
                    else return e;

                }

                this.timer = setInterval(()=>{

                            if (t >= 0) {


                    let h=Math.floor(t/60/60);
                    let m=Math.floor(t/60%60);
                    let s=Math.floor(t%60);

                    this.h = doubleNum(h);
                    this.m = doubleNum(m);
                    this.s = doubleNum(s);

                } else if(t == -1){
                   location.reload();

                }

                t--;

            },1000)





            if(res.data.isStart == 3 || t == 0){

                clearInterval(this.timer);

            }


            }
            this.$dispatch('isLoading', false);
        },
        beforeDestroy() {

        },
        methods: {

            async getActInfo(){

                let res = Request.post(Config.apiDomain + '/index/getActInfo',{data:{token:User.token}});

                return res;

            },

            async getAct(){

                let res = await Request.post(Config.apiDomain + '/index/addAct',{data:{token:User.token,act: 'MoneyGift'}});

                    if (res.status == 200) {

                        this.statusToast = true;

                        this.msg = '已领取资格'

                        this.changeStatus = true;
                        this.data = Object.assign({},this.data,{isJoin:1})

                    }else {

                        this.statusPop = true;

                        this.msg = res.msg

                    }



                return res;

            }

        },
        transitions:{
            'down':{
                enterClass:'fadeInDown',
                        leaveClass:'fadeOutUp'
            },
            'fade':{

                enterClass:'fadeIn',
                        leaveClass:'fadeOut'
            }
        }
    }
</script>
